<!DOCTYPE html>
<html>
<head>
    <title>装修费用计算</title>
    <meta  charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.2/style/weui.min.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.0/css/jquery-weui.min.css">
    <link rel="stylesheet" href="https://jqweui.cn/dist/demos/css/demos.css ">
    <script src="/static/js/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery-weui/1.2.0/js/jquery-weui.min.js"></script>
    <!--<script src="../dist/js/city-picker.js"></script>-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-weui/1.2.0/js/city-picker.js"></script>
    <style>
        .input {
            width: 100%;
            border: 0;
            outline: 0;
            -webkit-appearance: none;
            background-color: transparent;
            font-size: inherit;
            color: inherit;
            height: 1.47058824em;
            line-height: 1.47058824;
            margin-left: 25%;
            width: 50%;border-bottom: 1px solid #e5e5e5;
            text-align: center;
            margin-top: 50px;
        }
    </style>
</head>

<body  >

<!--头部开始-->
<header>
    <div id="course-list-wrap"  style="position: relative;line-height: 50px;text-align: center;border-bottom: 0.01rem solid #f4f4f4;">
        <a    href="{:url('/home/my/my')}" class="icon icon-xiazai6" style="position: absolute;left: 25px;" >
            <img   style="width: 10px;height: 15px" src="/static/images/back_gray.png"></a>
        </a>
        <span  style="font-size: 17px" >装修费用计算</span>
    </div>
</header>

<!--头部结束-->

<div class=" weui-cells_form"  style="margin-left: 30%;width: 40%;margin-top: 50px;border-bottom: 1px solid #e5e5e5;text-align: center" >
    <div class="weui-cell">
        <div class="weui-cell__bd">
            <input class="weui-input"  placeholder="请选择城市" id="home-city" type="text">
        </div>
    </div>
</div>

<div  style="margin-top: 25px;">
    <div     class="xf"   style="width: 49%;float: left;border-right:1px solid #e5e5e5 ;text-align: center">
        <img   style="width: 60%;"  src="/static/images/xf1.png">

        <div>新房套餐</div>
    </div>
    <div class="jf"   style="width: 50%;float:left;text-align: center">
        <img    style="width:60%;"  src="/static/images/jf2.png">
        <div>旧房套餐</div>
    </div>
</div>


<div   id="app">
    <input    v-model="num" class="input"  placeholder="请输入建筑面积（㎡）"  type="text">

    <div  class="cost"  style="text-align: center;font-size: 13px"> x{{price}}/㎡x税率1.03410  </div>
    <div   style="text-align: center;margin-top: 50px"> 预计花费 </div>
     <div   style="text-align: center;font-size: 25px;color: #fe8200">{{sum}} </div>
    <button    style="width: 100%;height:50px;color:white; font-size:16px;margin-bottom: 0px;background-color: #fe8200;border: 0;position: fixed;bottom: 0;" @click="count()">开始计算</button>
</div>


</body>


<script>
    $(function() {
        FastClick.attach(document.body);
    });

</script>

<script>

    $("#home-city").cityPicker({
        title: "选择目的地",
        showDistrict: false,
        onChange: function (picker, values, displayValues) {
            console.log(values, displayValues);
        }
    });
</script>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

<script src="/static/js/index.js"></script>
<script>
    $(".jf").click(function(){

        $(this).find('img').attr('src','/static/images/jf1.png');
        $(".xf").find('img').attr('src','/static/images/xf2.png');
        vm.price="699";


    });
    $(".xf").click(function(){

        $(this).find('img').attr('src','/static/images/xf1.png');
        $(".jf").find('img').attr('src','/static/images/jf2.png');
        vm.price="799";

    });
</script>

</html>
